<template>
  <ul>
    <li :class="activeTab===0?'activeTab': ''" @click="activeTab=0">模型编辑</li>
    <li :class="activeTab===1?'activeTab': ''" @click="activeTab=1">用户管理</li>
    <li :class="activeTab===2?'activeTab': ''" @click="activeTab=2">用户任务</li>
    <li :class="activeTab===3?'activeTab': ''" @click="activeTab=3">请假管理</li>
    <li :class="activeTab===4?'activeTab': ''" @click="activeTab=4">文章</li>
  </ul>
  <div class="flowableMain">
    <iframe src="/flowable/index.html" width="100%" height="100%" frameborder="0" v-if="activeTab===0"></iframe>
    <User v-if="activeTab===1"></User>
    <Task v-if="activeTab===2"></Task>
    <TLeaveApplyList v-if="activeTab===3"></TLeaveApplyList>
    <Article v-if="activeTab===4"></Article>
  </div>
</template>

<script>
import User from './User.vue'
import Task from './Task.vue';
import TLeaveApplyList from "./leave-apply/TLeaveApplyList";
import Article from "./Article";
export default {
  name: "Main",
  components: {Article, TLeaveApplyList, Task, User},
  data() {
    return {
       activeTab: 0
    }
  },
  methods: {}
}
</script>
<style scoped lang="less">
.activeTab {
  background-color: #42b983;
  color: white;
}
ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 5px 0px 0px 0px;
  li {
    box-shadow: -3px 0 3px 	#F5F5F5, /*左边阴影*/ 3px 0 3px 	#F5F5F5, /*右边阴影*/
      0 -3px 3px 	#F5F5F5, /*顶部阴影*/ 0 3px 3px 	#F5F5F5;
    text-decoration: none;
    font-size: 2rem;
    line-height: 50px;
    padding: 0px 50px;
    margin:0;
    cursor: pointer;
    &:hover {
      .activeTab()
    }
  }
}

.flowableMain {
  flex: 1;
  flex-grow: 1;
  padding: 5px;
}
</style>
